<template>

  <div class="search">
    <el-autocomplete
        clearable
        placeholder="请输入医院名称"
        :trigger-on-focus="false"
        v-model="hosname"
        :fetch-suggestions="fetchData"
        @select="goDetail"
    />
    <el-button type="primary" size="default" :icon="Search"></el-button>

  </div>

</template>


<script setup lang="ts">

//引入icon图标组件
import {Search} from "@element-plus/icons-vue"
import {ref} from 'vue'
import {useRouter} from 'vue-router';
//创建路由对象
let $router = useRouter();
//定义医院响应式变量
let hosname = ref('');
//引入请求方法
import {reqHospitalInfo} from "@/api/home";
//引入ts类型
import type {HospitalInfo, Content} from "@/api/home/type.ts";
//顶部组件的回调
const fetchData = async (keyword: string, cb: any) => {

  let result: HospitalInfo = await reqHospitalInfo(keyword);
  console.log(result);
  //整理数据，变成人家组件需要的数据格式
  let showData = result.data.data.map(item => {
    return {
      value: item.hosname,//展示医院的名字
      hoscode: item.hoscode//存储医院的编码


    }

  })



  //给组件提供展示的户数

  cb(showData);


}
//点击医院，进行跳转
const goDetail = (item: any) => {
  //点击推荐项目，进入医院的详情页，需要携带参数
  $router.push({path: '/hospital/register',query:{hoscode:item.hoscode}})


}



</script>

<script lang="ts">
export default {
  name: "search"
}
</script>

<style scoped lang="scss">

.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0px;

  //深度选择器，对element组件样式进行修改，否则样式修改不会生效
  ::v-deep(.el-input__wrapper) {
    width: 600px;
    margin-right: 10px;
  }

}

</style>
